<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第8周课程表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#64748B',
                        'web-dev': '#3B82F6',
                        'practice': '#10B981'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .class-card {
                @apply rounded-lg p-4 shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .day-column {
                @apply flex-1 min-w-[200px] p-2 border-r border-gray-200 last:border-r-0;
            }
            .time-slot {
                @apply h-16 mb-2 rounded border border-gray-200 p-1 transition-all duration-200;
            }
            .time-slot-filled {
                @apply cursor-pointer hover:ring-2 hover:ring-opacity-50;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
    <!-- 页面头部 -->
    <header class="bg-gradient-to-r from-primary to-accent text-white shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">课程表</h1>
                    <p class="text-blue-100">第8周 · 2025-10-20</p>
                </div>
                
                <!-- 模式切换器 -->
                <div class="bg-white/20 backdrop-blur-sm rounded-lg p-2 flex items-center">
                    <span class="mr-2 text-sm">时间模式:</span>
                    <div class="relative inline-block w-12 h-6">
                        <input type="checkbox" id="mode-toggle" class="opacity-0 w-0 h-0" checked>
                        <label for="mode-toggle" class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-white/30 rounded-full transition-all duration-300 before:absolute before:content-[''] before:h-5 before:w-5 before:left-0.5 before:bottom-0.5 before:bg-white before:rounded-full before:transition-all before:duration-300"></label>
                    </div>
                    <span id="mode-text" class="ml-2 text-sm font-medium">默认节次模式</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 课程图例 -->
        <div class="mb-6 bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-semibold mb-3">课程图例</h2>
            <div class="flex flex-wrap gap-4">
                <div class="flex items-center">
                    <div class="w-4 h-4 rounded bg-web-dev mr-2"></div>
                    <span>Web前端开发</span>
                </div>
                <div class="flex items-center">
                    <div class="w-4 h-4 rounded bg-practice mr-2"></div>
                    <span>专业综合实践</span>
                </div>
            </div>
        </div>
        
        <!-- 课程表容器 -->
        <div class="overflow-x-auto bg-white rounded-lg shadow-md">
            <div class="flex min-w-[900px]">
                <!-- 时间列 -->
                <div class="w-32 border-r border-gray-200 bg-gray-50">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium">节次</div>
                    <!-- 节次行 -->
                    <div class="time-slot flex items-center justify-center font-medium">1-2节</div>
                    <div class="time-slot flex items-center justify-center font-medium">3-4节</div>
                    <div class="time-slot flex items-center justify-center font-medium">5-6节</div>
                    <div class="time-slot flex items-center justify-center font-medium">7-8节</div>
                    <div class="time-slot flex items-center justify-center font-medium">9-10节</div>
                </div>
                
                <!-- 周一 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周一</div>
                    <div class="time-slot bg-web-dev/10 border-web-dev/30 time-slot-filled">
                        <div class="class-card bg-web-dev text-white">
                            <div class="font-semibold">Web前端开发</div>
                            <div class="text-xs opacity-90">1-2节</div>
                        </div>
                    </div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周二 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周二</div>
                    <div class="time-slot"></div>
                    <div class="time-slot bg-web-dev/10 border-web-dev/30 time-slot-filled">
                        <div class="class-card bg-web-dev text-white">
                            <div class="font-semibold">Web前端开发</div>
                            <div class="text-xs opacity-90">3-4节</div>
                        </div>
                    </div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周三 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周三</div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周四 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周四</div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot bg-web-dev/10 border-web-dev/30 time-slot-filled">
                        <div class="class-card bg-web-dev text-white">
                            <div class="font-semibold">Web前端开发</div>
                            <div class="text-xs opacity-90">5-6节</div>
                        </div>
                    </div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周五 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周五</div>
                    <div class="time-slot bg-practice/10 border-practice/30 time-slot-filled">
                        <div class="class-card bg-practice text-white">
                            <div class="font-semibold">专业综合实践</div>
                            <div class="text-xs opacity-90">1-2节</div>
                        </div>
                    </div>
                    <div class="time-slot bg-practice/10 border-practice/30 time-slot-filled">
                        <div class="class-card bg-practice text-white">
                            <div class="font-semibold">专业综合实践</div>
                            <div class="text-xs opacity-90">3-4节</div>
                        </div>
                    </div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周六 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周六</div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot bg-practice/10 border-practice/30 time-slot-filled">
                        <div class="class-card bg-practice text-white">
                            <div class="font-semibold">专业综合实践</div>
                            <div class="text-xs opacity-90">5-6节</div>
                        </div>
                    </div>
                    <div class="time-slot bg-practice/10 border-practice/30 time-slot-filled">
                        <div class="class-card bg-practice text-white">
                            <div class="font-semibold">专业综合实践</div>
                            <div class="text-xs opacity-90">7-8节</div>
                        </div>
                    </div>
                    <div class="time-slot"></div>
                </div>
                
                <!-- 周日 -->
                <div class="day-column">
                    <div class="h-16 border-b border-gray-200 flex items-center justify-center font-medium bg-gray-50">周日</div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot"></div>
                    <div class="time-slot bg-practice/10 border-practice/30 time-slot-filled">
                        <div class="class-card bg-practice text-white">
                            <div class="font-semibold">专业综合实践</div>
                            <div class="text-xs opacity-90">9-10节</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 课程详情模态框 -->
    <div id="class-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 id="modal-title" class="text-xl font-bold"></h3>
                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="space-y-3">
                    <div class="flex">
                        <span class="w-24 text-gray-500">时间:</span>
                        <span id="modal-time"></span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-gray-500">星期:</span>
                        <span id="modal-day"></span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-gray-500">周次:</span>
                        <span>第8周 (2025-10-20)</span>
                    </div>
                </div>
                <div class="mt-6 flex justify-end">
                    <button id="confirm-modal" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p>© 2025 课程表系统 | 设计与开发</p>
        </div>
    </footer>

    <script>
        // 模式切换功能
        const modeToggle = document.getElementById('mode-toggle');
        const modeText = document.getElementById('mode-text');
        const timeLabels = document.querySelectorAll('.time-slot.flex.items-center.justify-center.font-medium');
        
        // 两种模式的时间标签
        const defaultModeLabels = ['1-2节', '3-4节', '5-6节', '7-8节', '9-10节'];
        const timeModeLabels = ['08:00-09:40', '10:00-11:40', '13:30-15:10', '15:30-17:10', '18:30-20:10'];
        
        modeToggle.addEventListener('change', function() {
            if (this.checked) {
                modeText.textContent = '默认节次模式';
                // 切换到节次模式
                timeLabels.forEach((label, index) => {
                    label.textContent = defaultModeLabels[index];
                });
            } else {
                modeText.textContent = '具体时间模式';
                // 切换到具体时间模式
                timeLabels.forEach((label, index) => {
                    label.textContent = timeModeLabels[index];
                });
            }
        });
        
        // 模态框功能
        const classModal = document.getElementById('class-modal');
        const modalContent = document.getElementById('modal-content');
        const modalTitle = document.getElementById('modal-title');
        const modalTime = document.getElementById('modal-time');
        const modalDay = document.getElementById('modal-day');
        const closeModal = document.getElementById('close-modal');
        const confirmModal = document.getElementById('confirm-modal');
        const classCards = document.querySelectorAll('.time-slot-filled');
        
        // 打开模态框函数
        function openModal(className, timeSlot, day) {
            modalTitle.textContent = className;
            modalTime.textContent = modeToggle.checked ? 
                defaultModeLabels[timeSlot] : timeModeLabels[timeSlot];
            modalDay.textContent = day;
            
            classModal.classList.remove('hidden');
            // 触发动画
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }
        
        // 关闭模态框函数
        function closeModalFunc() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                classModal.classList.add('hidden');
            }, 300);
        }
        
        // 为每个课程卡片添加点击事件
        classCards.forEach((card, index) => {
            // 提取课程信息
            const className = card.querySelector('.class-card .font-semibold').textContent;
            const timeText = card.querySelector('.class-card .text-xs').textContent;
            const timeSlot = defaultModeLabels.indexOf(timeText);
            
            // 获取星期几
            const dayElement = card.parentElement.querySelector('.h-16');
            const day = dayElement.textContent;
            
            // 添加点击事件
            card.addEventListener('click', () => {
                openModal(className, timeSlot, day);
            });
        });
        
        // 关闭模态框事件
        closeModal.addEventListener('click', closeModalFunc);
        confirmModal.addEventListener('click', closeModalFunc);
        
        // 点击模态框外部关闭
        classModal.addEventListener('click', (e) => {
            if (e.target === classModal) {
                closeModalFunc();
            }
        });
        
        // 键盘ESC关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !classModal.classList.contains('hidden')) {
                closeModalFunc();
            }
        });
    </script>
</body>
</html>
